<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .c1{-->
<!--            color: red;-->
<!--        }-->
<!--        #c2{-->
<!--            color:gold;-->
<!--        }-->
<!--        .yy a{-->
<!--            color:dodgerblue;-->
<!--        }-->
<!--        input[type="text"]{-->
<!--            border: 1px solid red;-->
<!--        }-->
<!--        .v1[xx="456"]{-->
<!--            color:gold;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class="c1">中国</div>-->
<!--    <div id="c2">广西</div>-->
<!--    <div>联通</div>-->
<!--    <ul>-->
<!--        <li>北京</li>-->
<!--        <li>上海</li>-->
<!--        <li>深圳</li>-->
<!--    </ul>-->
<!--    <input type="text">-->
<!--    <input type="password">-->
<!--    <div class="v1" xx="123">s</div>-->
<!--    <div class="v1" xx="456">f</div>-->
<!--    <div class="v1" xx="999">a</div>-->
<!--    <div class="yy">-->
<!--        <a>百度</a>-->
<!--        <div>-->
<!--            <a>谷歌</a>-->
<!--        </div>-->
<!--        <ur>-->
<!--            <li>美国</li>-->
<!--            <li>日本</li>-->
<!--            <li>韩国</li>-->
<!--        </ur>-->
<!--    </div>-->
<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .c1{-->
<!--            color:red !important;-->
<!--            border:1px solid red;-->
<!--        }-->
<!--        .c2{-->
<!--            font-size:28px;-->
<!--            color:green;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class='c1 c2'>中国联通</div>-->
<!--</body>-->
<!--</html>-->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .c1{-->
<!--            height=300px;-->
<!--            width=50%;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class='c1'>中国联通</div>-->
<!--</body>-->
<!--</html>-->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->

<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div style="display:inline">中国</div>-->
<!--    <span style="display:block">联通</span>-->
<!--&lt;!&ndash;</body>&ndash;&gt;-->
<!--&lt;!&ndash;</html>&ndash;&gt;-->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .c1{-->
<!--            color: #00FF7F;-->
<!--            font-size: 88px;-->
<!--            font-weight: 880;-->
<!--            font-family: Microsoft Yahei;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class='c1'>中国联通</div>-->
<!--    <div >中国移动</div>-->
<!--</body>-->
<!--</html>-->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .c1{-->
<!--            height: 59px;-->
<!--            width: 300px;-->
<!--            border: 1px solid red;-->
<!--            text-align: center;   /* 水平方向居中 */  -->
<!--            line-height: 59px;    /* 垂直方向居中 */  /* 使用这个方法文本中必须只能有一行 */-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class='c1'>中国联通</div>-->
<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .item{-->
<!--            float: left;-->
<!--            width: 280px;-->
<!--            height: 170px;-->
<!--            border: 1px solid red;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div style="background-color: dodgerblue">-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div style="clear: both;"></div>-->
<!--    </div>-->
<!--    <div>你好呀 </div>-->
<!--</body>-->
<!--</html>-->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .outer{-->
<!--            border: 1px solid red;-->
<!--            height: 200px;-->
<!--            width: 200px;-->
<!--            padding: 20px 10px 5px 20px;/* 上  右  下  左*/-->
<!--&lt;!&ndash;            padding-top: 20px;&ndash;&gt;-->
<!--&lt;!&ndash;            padding-left: 20px;&ndash;&gt;-->
<!--&lt;!&ndash;            padding-right: 20px;&ndash;&gt;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class="outer">-->

<!--        <div style="background-color: gold;">听妈妈的话</div>-->
<!--        <div>小盆友你是否有很多问号</div>-->
<!--    </div>-->
<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--</head>-->
<!--<body>-->
<!--    <div style="height: 200px;background-color: dodgerblue;"></div>-->
<!--    <div style="height: 100px;background-color: red;margin-top: 100px"></div>-->
<!--</body>-->
<!--</html>-->

<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        body{-->
<!--            margin: 0;-->
<!--        }-->
<!--        .c1{-->
<!--            width: 980px;-->
<!--            background-color: pink;-->
<!--            height: 1000px;-->
<!--            margin: 0 auto;   /* auto默认自动居中 */-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class="c1"></div>-->
<!--</body>-->
<!--</html>-->


<!-- 小米商城标签  -->
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        body {-->
<!--            margin: 0;-->
<!--        }-->

<!--        .header {-->
<!--            background-color: #333;-->
<!--        }-->

<!--        .container{-->
<!--            width: 1000px;-->
<!--            margin: 0 auto;-->
<!--        }-->

<!--        .header .menu {-->
<!--            float: left;-->
<!--            color: white;-->
<!--        }-->

<!--        .header .account {-->
<!--            float: right;-->
<!--            color: white;-->
<!--        }-->
<!--        .header a{-->
<!--            color: #b0b0b0;-->
<!--            line-height: 40px;-->
<!--            display: inline-block;-->
<!--            font-size: 12px;-->
<!--            margin-right: 10px;-->

<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="header">-->
<!--    <div class="container">-->
<!--        <div class="menu">-->
<!--            <a>小米商城</a>-->
<!--            <a>MIUI</a>-->
<!--            <a>云服务</a>-->
<!--            <a>有品</a>-->
<!--            <a>开放服务</a>-->
<!--        </div>-->
<!--        <div class="account">-->
<!--            <a>登录</a>-->
<!--            <a>注册</a>-->
<!--            <a>消息通知</a>-->
<!--        </div>-->
<!--        <div style="clear: both"></div>-->
<!--    </div>-->
<!--</div>-->
<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        body{-->
<!--            margin: 0;-->
<!--        }-->
<!--        .sub-header .ht{-->
<!--            height: 100px;-->
<!--        }-->
<!--        .sub-header{-->
<!--            height: 100px;-->
<!--        }-->
<!--        .container{-->
<!--            width: 1000px;-->
<!--            margin: 0 auto;-->
<!--        }-->
<!--        .sub-header .logo{-->
<!--            width: 234px;-->
<!--            float: left;-->
<!--        }-->
<!--        .sub-header .logo a img{-->
<!--            margin-top: 22px;-->
<!--            display: inline-block-->
<!--        }-->
<!--        .sub-header .menu-list{-->
<!--            float: left;-->
<!--            line-height: 100px;-->
<!--        }-->
<!--        .sub-header .menu-list a{-->
<!--            display: inline-block;-->
<!--            padding: 0 20px;-->
<!--            color: #333;-->
<!--            font-size: 16px;-->
<!--            text-decoration: none;-->
<!--        }-->
<!--        .sub-header .menu-list a:hover{-->
<!--            color: #ff6700;-->
<!--        }-->
<!--        .sub-header .search{-->
<!--            float: right;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="sub-header">-->
<!--    <div class="container">-->
<!--        <div class="ht logo">-->
<!--&lt;!&ndash;            a标签是行内标签，默认设置高度，边距是无效的-->
<!--                 要想有效  要么是块级 要么是行内+块级&ndash;&gt;-->
<!--            <a href="https://www.mi.com/">-->
<!--                <img src="/static/img/R-C.png" style="height: 56px; width: 56px;" alt="">-->
<!--            </a>-->
<!--        </div>-->
<!--        <div class="ht menu-list">-->
<!--            <a href="https://www.mi.com">小米手机</a>-->
<!--            <a href="">redmi手机</a>-->
<!--            <a href="">电视</a>-->
<!--            <a href="">笔记本</a>-->
<!--            <a href="">平板</a>-->
<!--        </div>-->

<!--        <div class="ht search"></div>-->
<!--        <div class="ht clear: both"></div>-->
<!--    </div>-->

<!--</div>-->
<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        body {-->
<!--            margin: 0;-->
<!--        }-->
<!--        img{-->
<!--            width: 100%;-->
<!--            height: 100%;-->
<!--        }-->
<!--        .left{-->
<!--            float: left;-->
<!--        }-->
<!--        .container{-->
<!--            width: 1000px;-->
<!--            margin: 0 auto;-->
<!--        }-->
<!--        .header {-->
<!--            background-color: #333;-->
<!--        }-->
<!--        .header .menu {-->
<!--            float: left;-->
<!--            color: white;-->
<!--        }-->

<!--        .header .account {-->
<!--            float: right;-->
<!--            color: white;-->
<!--        }-->
<!--        .header a{-->
<!--            color: #b0b0b0;-->
<!--            line-height: 40px;-->
<!--            display: inline-block;-->
<!--            font-size: 12px;-->
<!--            margin-right: 10px;-->
<!--            text-decoration: none;-->
<!--        }-->
<!--        .header a:hover{-->
<!--            color: white;-->
<!--        }-->
<!--        .sub-header .ht{-->
<!--            height: 100px;-->
<!--        }-->
<!--        .sub-header{-->
<!--            height: 100px;-->
<!--        }-->
<!--        .sub-header .logo{-->
<!--            width: 234px;-->
<!--            float: left;-->
<!--        }-->
<!--        .sub-header .logo a img{-->
<!--            margin-top: 22px;-->
<!--            display: inline-block-->
<!--        }-->
<!--        .sub-header .menu-list{-->
<!--            float: left;-->
<!--            line-height: 100px;-->
<!--        }-->
<!--        .sub-header .menu-list a{-->
<!--            display: inline-block;-->
<!--            padding: 0 20px;-->
<!--            color: #333;-->
<!--            font-size: 16px;-->
<!--            text-decoration: none;-->
<!--        }-->
<!--        .sub-header .menu-list a:hover{-->
<!--            color: #ff6700;-->
<!--        }-->
<!--        .sub-header .search{-->
<!--            float: right;-->
<!--        }-->
<!--        .slider .sd-img{-->
<!--            width: 1000px;-->
<!--            height: 460px;-->
<!--        }-->
<!--        .news{-->
<!--            margin-top :14px;-->
<!--        }-->
<!--        .news .channel{-->
<!--            width: 230px;-->
<!--            height: 170px;-->
<!--            background-color: #5f5750;-->
<!--            padding: 1px;-->
<!--        }-->
<!--        .news .channel .item{-->
<!--            height: 86px;-->
<!--            width: 76px;-->
<!--            float: left;-->
<!--            text-align: center;-->

<!--        }-->
<!--        .news .channel .item a{-->
<!--            display: inline-block;-->
<!--            font-size: 12px;-->
<!--            padding-top: 18px;-->
<!--            color: #fff;-->
<!--            text-decoration: none;-->
<!--            opacity: 0.7;-->
<!--&lt;!&ndash;        透明度设置   &ndash;&gt;-->
<!--        }-->
<!--        .news .channel .item a:hover{-->
<!--            opacity: 1;-->
<!--        }-->
<!--        .news .channel .item img{-->
<!--             height: 24px;-->
<!--             width: 24px;-->
<!--             display: block;-->
<!--             margin: 0 auto 4px;-->

<!--&lt;!&ndash;             margin-bottom: 4px;&ndash;&gt;-->
<!--        }-->

<!--        .news .list-item{-->
<!--            width: 250px;-->
<!--            height: 170px;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="header">-->
<!--    <div class="container">-->
<!--        <div class="menu">-->
<!--            <a href="">小米商城</a>-->
<!--            <a href="">MIUI</a>-->
<!--            <a href="">云服务</a>-->
<!--            <a href="">有品</a>-->
<!--            <a href="">开放服务</a>-->
<!--        </div>-->
<!--        <div class="account">-->
<!--            <a href="">登录</a>-->
<!--            <a href="">注册</a>-->
<!--            <a href="">消息通知</a>-->
<!--        </div>-->
<!--        <div style="clear: both"></div>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="sub-header">-->
<!--    <div class="container">-->
<!--        <div class="ht logo">-->
<!--&lt;!&ndash;            a标签是行内标签，默认设置高度，边距是无效的-->
<!--                 要想有效  要么是块级 要么是行内+块级&ndash;&gt;-->
<!--            <a href="https://www.mi.com/">-->
<!--                <img src="/static/img/R-C.png" style="height: 56px; width: 56px;" alt="">-->
<!--            </a>-->
<!--        </div>-->
<!--        <div class="ht menu-list">-->
<!--            <a href="https://www.mi.com">小米手机</a>-->
<!--            <a href="">redmi手机</a>-->
<!--            <a href="">电视</a>-->
<!--            <a href="">笔记本</a>-->
<!--            <a href="">平板</a>-->
<!--        </div>-->
<!--        <div class="ht search"></div>-->
<!--        <div class="ht clear: both"></div>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="slider">-->
<!--    <div class="container">-->
<!--        <div class="sd-img">-->
<!--            <img src="/static/img/mi-1.png/" alt="">-->
<!--        </div>-->
<!--    </div>-->

<!--</div>-->
<!--<div class="news">-->
<!--    <div class="container">-->
<!--        <div class="channel left">-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-5.png" alt="">-->
<!--                    <span>保障服务</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-6.png" alt="">-->
<!--                    <span>企业团购</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-7.png" alt="">-->
<!--                    <span>F码通行</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-8.png" alt="">-->
<!--                    <span>米粉卡</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-9.png" alt="">-->
<!--                    <span>以旧换新</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-10.png" alt="">-->
<!--                    <span>话费充值</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="clear:both"></div>-->
<!--        </div>-->
<!--        <div class="list-item left" style="margin-left:5px">-->
<!--            <img src="/static/img/mi-2.jpg">-->
<!--        </div>-->
<!--        <div class="list-item left" style="margin-left:5px">-->
<!--            <img src="/static/img/mi-3.jpg">-->
<!--        </div>-->
<!--        <div class="list-item left" style="margin-left:6px">-->
<!--            <img src="/static/img/mi-4.jpg">-->
<!--        </div>-->
<!--        <div class="clear:both"></div>-->
<!--    </div>-->
<!--</div>-->
<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .clearfix:after{-->
<!--            content:"";-->
<!--            display: block;-->
<!--            clear: both;-->
<!--        }-->
<!--        .item{-->
<!--            float: left;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class="clearfix">-->
<!--        <div class="item">1</div>-->
<!--        <div class="item">2</div>-->
<!--        <div class="item">3</div>-->
<!--    </div>-->
<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <link rel="stylesheet" href="/static/css/B.css">-->
<!--</head>-->
<!--<body>-->
<!--<div class="header">-->
<!--    <div class="container">-->
<!--        <div class="menu">-->
<!--            <a href="">小米商城</a>-->
<!--            <a href="">MIUI</a>-->
<!--            <a href="">云服务</a>-->
<!--            <a href="">有品</a>-->
<!--            <a href="" class="app">下载APP-->
<!--                <div class="download">-->
<!--                    <img src="/static/img/mi-ma.png/" alt="">-->
<!--                </div>-->
<!--            </a>-->

<!--        </div>-->
<!--        <div class="account">-->
<!--            <a href="">登录</a>-->
<!--            <a href="">注册</a>-->
<!--            <a href="">消息通知</a>-->
<!--        </div>-->
<!--        <div style="clear: both"></div>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="sub-header">-->
<!--    <div class="container">-->
<!--        <div class="ht logo">-->
<!--&lt;!&ndash;            a标签是行内标签，默认设置高度，边距是无效的-->
<!--                 要想有效  要么是块级 要么是行内+块级&ndash;&gt;-->
<!--            <a href="https://www.mi.com/">-->
<!--                <img src="/static/img/R-C.png" style="height: 56px; width: 56px;" alt="">-->
<!--            </a>-->
<!--        </div>-->
<!--        <div class="ht menu-list">-->
<!--            <a href="https://www.mi.com">小米手机</a>-->
<!--            <a href="">redmi手机</a>-->
<!--            <a href="">电视</a>-->
<!--            <a href="">笔记本</a>-->
<!--            <a href="">平板</a>-->
<!--        </div>-->
<!--        <div class="ht search"></div>-->
<!--        <div class="ht clear: both"></div>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="slider">-->
<!--    <div class="container">-->
<!--        <div class="sd-img">-->
<!--            <img src="/static/img/mi-1.png/" alt="">-->
<!--        </div>-->
<!--    </div>-->

<!--</div>-->
<!--<div class="news">-->
<!--    <div class="container">-->
<!--        <div class="channel left">-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-5.png" alt="">-->
<!--                    <span>保障服务</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-6.png" alt="">-->
<!--                    <span>企业团购</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-7.png" alt="">-->
<!--                    <span>F码通行</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-8.png" alt="">-->
<!--                    <span>米粉卡</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-9.png" alt="">-->
<!--                    <span>以旧换新</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <a href="">-->
<!--                    <img src="/static/img/mi-10.png" alt="">-->
<!--                    <span>话费充值</span>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="clear:both"></div>-->
<!--        </div>-->
<!--        <div class="list-item left" style="margin-left:5px">-->
<!--            <img src="/static/img/mi-2.jpg">-->
<!--        </div>-->
<!--        <div class="list-item left" style="margin-left:5px">-->
<!--            <img src="/static/img/mi-3.jpg">-->
<!--        </div>-->
<!--        <div class="list-item left" style="margin-left:6px">-->
<!--            <img src="/static/img/mi-4.jpg">-->
<!--        </div>-->
<!--        <div class="clear:both"></div>-->
<!--    </div>-->
<!--</div>-->
<!--<div style="height: 1000px ;background-color: #5f5750"></div>-->
<!--<div class="back"></div>-->
<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        body{-->
<!--            margin: 0;-->
<!--        }-->
<!--        .c1{-->
<!--            height: 1000px;-->
<!--            background-color: #5f5750;-->
<!--            color: white;-->
<!--        }-->
<!--        .dialog{-->
<!--            position: fixed;-->
<!--            height: 300px;-->
<!--            width: 500px;-->
<!--            background-color: white;-->
<!--            left: 0;-->
<!--            right: 0;-->
<!--            margin: 0 auto;-->
<!--            top: 200px;-->
<!--            z-index: 1000;-->

<!--        }-->

<!--        .mask{-->
<!--            background-color: black;-->
<!--            position: fixed;-->
<!--            left: 0;-->
<!--            right: 0;-->
<!--            top: 0;-->
<!--            bottom: 0;-->
<!--            opacity: 0.6;-->
<!--            z-index: 999;-->
<!--&lt;!&ndash;            z-index表示设置元素的堆叠顺序&ndash;&gt;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="mask"></div>-->
<!--<div class="dialog"></div>-->
<!--<div class="c1">1234</div>-->
<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .c1{-->
<!--            height: 300px;-->
<!--            width: 500px;-->
<!--            border: 1px solid red;-->
<!--            margin: 100px;-->
<!--            position: relative;-->
<!--        }-->
<!--        .c1 .c2{-->
<!--            height:59px;-->
<!--            width: 59px;-->
<!--            background-color: #00ff7F;-->
<!--            position: absolute;-->
<!--            right: 0;-->
<!--            bottom: 0;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class="c1">-->
<!--        <div class="c2"></div>-->
<!--    </div>-->
<!--</body>-->


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .c1{-->
<!--            height: 50px;-->
<!--            width: 500px;-->
<!--            margin: 400px;-->
<!--            background-color: #5f5750;-->
<!--            border left: 2px solid transparent;-->
<!--            }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class="c1">哇哈哈</div>-->
<!--</body>-->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">-->
<!--</head>-->
<!--<body>-->
<!--<div class="container-fluid clearfix">-->
<!--    <div class="col-sm-9">-->
<!--        <div class="media">-->
<!--            <div class="media-left">-->
<!--                <a href="#">-->
<!--                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"-->
<!--                         src=""-->
<!--                         data-holder-rendered="true" style="width: 64px; height: 64px;">-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="media-body">-->
<!--                <h4 class="media-heading">Media heading</h4>-->
<!--                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras-->
<!--                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate-->
<!--                fringilla. Donec lacinia congue felis in faucibus.-->
<!--            </div>-->
<!--        </div>-->
<!--        <ul class="pagination">-->
<!--            <li class="disabled"><a href="#" aria-label="Previous">-->
<!--                <span aria-hidden="true">«</span></a></li>-->
<!--            <li class="active"><a href="#">1-->
<!--                <span class="sr-only">(current)</span></a></li>-->
<!--            <li><a href="#">2</a></li>-->
<!--            <li><a href="#">3</a></li>-->
<!--            <li><a href="#">4</a></li>-->
<!--            <li><a href="#">5</a></li>-->
<!--            <li><a href="#" aria-label="Next">-->
<!--                <span aria-hidden="true">»</span></a></li>-->
<!--        </ul>-->
<!--    </div>-->
<!--    <div class="col-sm-3">-->
<!--        <div class="panel panel-primary">-->
<!--            <div class="panel-heading">今日热销</div>-->
<!--            <div class="panel-body">-->
<!--                西瓜-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="panel panel-danger">-->
<!--            <div class="panel-heading">今日推荐</div>-->
<!--            <div class="panel-body">-->
<!--                哈密瓜-->
<!--            </div>-->
<!--        </div>-->

<!--    </div>-->


<!--</div>-->
<!--</body>-->
<!--</html>-->

<!--登录界面-->
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">-->
<!--    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">-->
<!--    <style>-->
<!--        .account{-->
<!--            width: 350px;-->
<!--            border: 1px solid #dddddd;-->
<!--            border-radius: 10px;-->
<!--&lt;!&ndash;            设置圆角为10px&ndash;&gt;-->
<!--            box-shadow: 10px 5px 20px #aaa;-->
<!--&lt;!&ndash;            设置阴影 右偏移量  下偏移量  阴影模糊半径 &ndash;&gt;-->
<!--            height: 1000px;-->
<!--            margin-left: auto;-->
<!--            margin-right: auto;-->
<!--            margin-top: 100px;-->
<!--            padding: 20px 40px;-->
<!--&lt;!&ndash;            设置内边距 上下 左右&ndash;&gt;-->
<!--        }-->
<!--        .account h1{-->
<!--            text-align: center;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="account">-->
<!--    <h1>用户登录</h1>-->
<!--    <form>-->
<!--        <div class="form-group">-->
<!--            <label for="exampleInputEmail1">用户名:</label>-->
<!--            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="xjl">-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label for="exampleInputPassword1">密码:</label>-->
<!--            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">-->
<!--        </div>-->
<!--        <button type="submit" class="btn btn-primary">-->
<!--            <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 登 录</button>-->


<!--    </form>-->
<!--</div>-->

<!--&lt;!&ndash; Button trigger modal &ndash;&gt;-->
<!--<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">-->
<!--  提示框-->
<!--</button>-->

<!--&lt;!&ndash; Modal &ndash;&gt;-->
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
<!--  <div class="modal-dialog" role="document">-->
<!--    <div class="modal-content">-->
<!--      <div class="modal-header">-->
<!--        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--        <h4 class="modal-title" id="myModalLabel">欢迎界面</h4>-->
<!--      </div>-->
<!--      <div class="modal-body">-->
<!--        欢迎来到购物商城-->
<!--      </div>-->
<!--      <div class="modal-footer">-->
<!--        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
<!--        <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->

<!--<script src="/static/js/jquery-3.6.1.min.js"></script>-->
<!--<script src="/static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>-->

<!--</body>-->
<!--</html>-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    {% for item in n1 %}
    <div>{{item}}</div>
    {% endfor %}

</div>
<hr/>
<!--    <ul>-->
<!--&lt;!&ndash;        keys 拿字典里面的键    value 拿字典里面的值&ndash;&gt;-->
<!--&lt;!&ndash;        {% for item in n3.values %}&ndash;&gt;-->
<!--&lt;!&ndash;            <li>{{ item }}</li>&ndash;&gt;-->
<!--&lt;!&ndash;        {% endfor %}&ndash;&gt;-->
<!--&lt;!&ndash;        {% for item in n3.keys %}&ndash;&gt;-->
<!--&lt;!&ndash;            <li>{{ item }}</li>&ndash;&gt;-->
<!--&lt;!&ndash;        {% endfor %}&ndash;&gt;-->
<!--&lt;!&ndash;        字典中  键 = 值&ndash;&gt;-->
<!--        {% for k,v in n3.items %}-->
<!--            <li>{{ k }} = {{ v }}</li>-->
<!--        {% endfor %}-->

<!--    </ul>-->
</body>


